/*
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-05-08 23:07:54
 * @LastEditTime: 2022-05-16 10:28:35
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description: 
 */
import React from 'react'
import { Link, useNavigate } from 'react-router-dom'

import { Form, Input, Button, message } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'

import { registerUser } from '../../api/sys'

import '../Login/index.less'
import logoImg from '../../assets/logo.png'

export default function Register() {
  const navigate = useNavigate()

  const onFinish = async (values) => {
    const {  message: msg } = await registerUser(values)
    message.success(msg + '正在返回登录...')
    setTimeout(() => {
      navigate('/login')
    }, 1500)
  };
  return (
    <div className='login-container'>
      <img src={logoImg} alt="error" className='logo-img' />
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
      >
        <Form.Item
          name="username"
          rules={[
            {
              required: true,
              message: 'Please input your Username!',
            },
          ]}
        >
          <Input prefix={<UserOutlined
            className="site-form-item-icon" />}
            size='large'
            placeholder="Username" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: 'Please input your Password!',
            },
          ]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            size='large'
            placeholder="Password"
          />
        </Form.Item>
        <Form.Item
          name="confirm"
          dependencies={['password']}
          hasFeedback
          rules={[
            {
              required: true,
              message: 'Please confirm your password!',
            },
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (!value || getFieldValue('password') === value) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error('The two passwords that you entered do not match!'));
              },
            }),
          ]}
        >
          <Input.Password prefix={<LockOutlined className="site-form-item-icon" />} placeholder='confirm Password' size='large' />
        </Form.Item>
        <Form.Item>
          <Link className="login-form-forgot" to='/login'>
            已有账号返回登录
          </Link>
        </Form.Item>
        <Form.Item>
          <Button type="primary" size='large' block htmlType="submit" className="login-form-button">
            注册
          </Button>
        </Form.Item>
      </Form>
    </div>

  )
}
